import React, { useEffect } from "react";
import { connect } from "dva";
import { Dispatch } from "../../../../node_modules/redux";
import { Button, Col, Form, Input, Row } from "antd";
import SharesBox from "@/components/SharesBox";
import "./index.less";

const formLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 18,
  },
};

interface Props {
  dispatch: Dispatch<{ type: string; payload?: any }>;
  followData: any;
}

const Index: React.FC<Props> = (props: Props): JSX.Element => {
  const [form] = Form.useForm();
  const { dispatch, followData } = props;
  useEffect(() => {
    dispatch({
      type: "shares/queryFollow",
    });
  }, []);

  const addFollow = () => {
    form
      .validateFields()
      .then((value) => {
        dispatch({
          type: "shares/addFollow",
          payload: {
            code: value.code,
          },
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };
  return (
    <div className="shares">
      <Form {...formLayout} form={form}>
        <Row style={{ lineHeight: "40px" }}>
          <Col span={18}>
            <Form.Item
              name="code"
              label="股票代码"
              rules={[{ required: true, message: "请输入" }]}
            >
              <Input placeholder="请输入股票代码" />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Button type="primary" onClick={addFollow}>
              订阅股票
            </Button>
          </Col>
        </Row>
      </Form>
      <div className="model-content">
        {followData.map((item: any) => (
          <SharesBox key={item.code} code={item.code} />
        ))}
      </div>
    </div>
  );
};

const mapStateToProps = (state: any): { followData: object } => {
  const { followData } = state.shares;
  return { followData };
};

export default connect(mapStateToProps)(Index);
